<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">我的工作平台 </el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">回执操作</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true"  >
      <el-form-item style="margin-left: -30px; margin-top: 30px;">
        <el-form-item label="任务编号:" class="a">
          <el-input v-model="formInline.id" class="inpu"></el-input>
        </el-form-item>
        <el-form-item label="线路编号:">
          <el-input v-model="formInline.name" class="inpu"></el-input>
        </el-form-item>
        <el-form-item label="杆塔编号:">
          <el-input v-model="formInline.gname" class="inpu"></el-input>
        </el-form-item>
        <el-form-item label="发现人:">
          <el-input v-model="formInline.gren" class="inpu"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="缺陷类型:" class="a1">
          <el-select v-model="formInline.lx" placeholder="--请选择--" class="inpu">
            <el-option value="叉梁断裂"></el-option>
            <el-option value="拦河线断裂"></el-option>
            <el-option value="绝缘子爆破"></el-option>
            <el-option value="杆塔倾斜"></el-option>
            <el-option value="绝缘子爆破"></el-option>
            <el-option value="吊杆变形"></el-option>
            <el-option value="其他"></el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="缺陷级别:" class="a2">
          <el-select v-model="formInline.jb" placeholder="--请选择--" class="inpu">
            <el-option value="一般"></el-option>
            <el-option value="严重"></el-option>
            <el-option value="紧级"></el-option>
          </el-select>
        </el-form-item>
        <!-- 时间    required 必填标志-->
        <el-form-item label="发现时间:" required class="a3">
          <el-col :span="11">
            <el-form-item prop="date1" class="en">
              <el-date-picker type="date" placeholder="选择日期" v-model="formInline.date1" style="width: 70%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="margin-left: -30px;">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker type="date" placeholder="选择时间" v-model="formInline.date2" style="width: 75%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="button1">
          <el-button type="primary" @click="submitForm('numberValidateForm')">查询</el-button>
        </el-form-item>
        <br />
        <el-form-item class="button2">
          <el-button type="primary" @click="addxz()">保存</el-button>
        </el-form-item>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" :row-class-name="tabRowClassName" border style="width: 100%" class="t">
      <el-table-column prop="id" label="任务编号" width="90" align="center">
      </el-table-column>
      <el-table-column prop="name" label="线路编号" width="130" align="center">
      </el-table-column>
      <el-table-column prop="gname" label="杆塔编号" width="135" align="center">
      </el-table-column>
      <el-table-column prop="lx" label="缺陷类型" width="150" align="center">
      </el-table-column>
      <el-table-column prop="whl" label="完好率" width="125" align="center">
      </el-table-column>
      <el-table-column prop="lsu" label="缺陷描述" width="150" align="center">
      </el-table-column>
      <el-table-column prop="date" label="发现时间" width="120" align="center">
      </el-table-column>
      <el-table-column prop="gren" label="发现人员" width="160" align="center">
      </el-table-column>
    </el-table>
    <!-- 警告 -->
    <el-alert style="height: 80px; width: 97%;" title="说明:确认级别后的数据在列表中不再显示。" type="warning" effect="dark" center
      :closable="false" class="t1" show-icon>
    </el-alert>
    <!-- 分页 -->
    <!--  :total="4"  这个是多少条数   jumper这个是前往那一页-->
    <el-pagination background @current-change="page" @prev-click="page" @next-click="page" layout="prev,pager,next,jumper,total"
     class="fenye1"      :total="7">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formInline: {
          id: '',
          name: '',
          gname: '',
          gren: '',
          lx: '',
          jb: '',
          date1: '',
          date2: ''
        },
        form: {
          date1: [{
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }],
          date2: [{
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }],
        },
        tableData: [{ //select 绑定的数组
          id: 'LTX0245',
          name: 'XW0010',
          gname: 'XW0001',
          lx: '拦河线断裂',
          whl: '79%',
          lsu: '拦河线断裂严重',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '一般'
        }, {
          id: 'LTX0246',
          name: 'XW0010',
          gname: 'XW0002',
          lx: '叉粱断裂',
          whl: '65%',
          lsu: '2根已断裂',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '一般'
        }, {
          id: 'LTX0247',
          name: 'XW0010',
          gname: 'XW0003',
          lx: '吊杆变形',
          whl: '54%',
          lsu: '变形严重',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '紧急'
        }, {
          id: 'LTX0248',
          name: 'XW0010',
          gname: 'XW0004',
          lx: '拦河线断裂',
          whl: '88%',
          lsu: '全部不可用',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '一般'
        }, {
          id: 'LTX0249',
          name: 'XW0010',
          gname: 'XW0005',
          lx: '叉粱断裂',
          whl: '39%',
          lsu: '基本断裂',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '严重'
        }, {
          id: 'LTX0250',
          name: 'XW0010',
          gname: 'XW0006',
          lx: '其他',
          whl: '49%',
          lsu: '其他',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '严重'
        }, {
          id: 'LTX0251',
          name: 'XW0010',
          gname: 'XW0007',
          lx: '叉粱断裂',
          whl: '79%',
          lsu: '需维修断裂处',
          date: '2013/12/12',
          gren: '巡检员测试用户01',
          jb: '一般'
        }],

        value: '',
      }
    },
    methods: {
      addxz() { //添加杆塔
        //this.tableData[this.tableData.length]=this.form1;
        //this.tableData.push(this.form1);//增加数据  在表格tableData中显示  数组form1的数据
        this.$message({ //消息框弹出
          type: 'success',
          message: '保存成功!',
        });
        //点击确定关闭对话框
        this.dialogFormVisible = false;
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      tabRowClassName({
        row,
        rowIndex
      }) { //是表格里面指定的行数变色
        let index = rowIndex + 0;
        if (index % 2 == 0) {
          return 'warning-row'
        }
      },
    }
  }
</script>

<style>
 .inpu {
   width: 150px;
   height: 30px;
 }

 .a {
   margin-left: 0px;
 }

 .a1 {
   margin-left: 70px;
 }

 .a2 {
   margin-left: 0px;
 }

 .a3 {
   margin-left: -5px;
 }

 .en {
   margin-left: -40px;
 }

 .button1 {
   margin-left: -60px;
 }

 .button2 {
   margin-left: -1000px;
 }

 .jb {
   width: 130px;
   height: 20px;
 }

 /* 警告移动 */

 .t1{
    margin-left: 30px;
 }
 /*设置斑马线*/
 .el-table .warning-row{
 background:whitesmoke
 }
</style>
